<template>
    <div class="map-page">
        <!-- 地图容器 -->
        <div ref="mapContainer" class="map-container"></div>
    </div>
</template>

<script>
import Map from 'ol/Map'
import View from 'ol/View'
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
import { XYZ, Vector as VectorSource } from 'ol/source'
// import { defaults as defaultControls } from 'ol/control';
import { defaults, Rotate } from 'ol/control';
import FullScreen from 'ol/control/FullScreen.js';
import ZoomSlider from 'ol/control/ZoomSlider.js';
import MousePosition from 'ol/control/MousePosition.js';
export default {
    name: 'MapComponent',
    data() {
        return {
            map: null,
        }
    },

    mounted() {
        this.$nextTick(() => {
            this.initMap()
        })
    },

    methods: {
        initMap() {
            // 初始化底图
            const gaodeLayer = new TileLayer({
                source: new XYZ({
                    // url: 'https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
                    // crossOrigin: 'anonymous'
                    url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
                    attributions: '© <a href="https://www.amap.com/">高德地图</a>'
                })
            })


            // 创建地图
            this.map = new Map({ // 添加这个配置
                target: this.$refs.mapContainer,
                layers: [gaodeLayer],
                view: new View({
                    center: [116.3974, 39.9093],
                    zoom: 3,
                    minZoom: 3,
                    maxZoom: 18,
                    // projection: 'EPSG:4326'
                    enableRotation: true,
                }),
                controls: defaults({
                    attribution: true,
                    zoom: true,
                    rotate: true, // 确保旋转控制启用
                }).extend([
                    new Rotate(), // 显式添加旋转控件
                    new FullScreen(),
                    new ZoomSlider(),
                    new MousePosition()
                ]),
                canvas: {
                    willReadFrequently: true
                },
            })

        }

    }
}
</script>

<style scoped>
.map-page {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 500px;
}

.map-container {
    width: 100%;
    height: 100%;
    background: #f0f0f0;
}

/* 自定义控制面板 - 右上角 */
.custom-controls {
    position: absolute;
    top: 70px;
    right: 10px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    min-width: 150px;
    border: 1px solid #e0e0e0;
    backdrop-filter: blur(5px);
}

.control-group {
    margin-bottom: 12px;
}

.control-group:last-child {
    margin-bottom: 0;
}

.control-group h4 {
    margin: 0 0 6px 0;
    font-size: 12px;
    color: #333;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
}

.control-btn {
    display: block;
    width: 100%;
    padding: 6px 8px;
    margin-bottom: 4px;
    border: 1px solid #ddd;
    background: #f8f9fa;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s ease;
    text-align: center;
    font-family: inherit;
    line-height: 1.2;
}

.control-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
    transform: translateY(-1px);
}

.control-btn.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

.control-btn:last-child {
    margin-bottom: 0;
}

/* 控件显示容器 */
.control-display {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    font-family: 'Microsoft YaHei', Arial, sans-serif;
    z-index: 999;
    backdrop-filter: blur(5px);
    line-height: 1.2;
}

#scale-line {
    bottom: 40px;
    left: 10px;
    min-width: 60px;
    text-align: center;
    font-weight: 500;
}

#mouse-position {
    bottom: 10px;
    right: 10px;
    min-width: 160px;
    text-align: center;
    white-space: nowrap;
    font-weight: 500;
}

/* 修复 OpenLayers 默认控件样式 */
:deep(.ol-zoom) {
    top: 10px;
    left: 10px;
}

:deep(.ol-zoom .ol-zoom-in) {
    border-radius: 4px 4px 0 0;
}

:deep(.ol-zoom .ol-zoom-out) {
    border-radius: 0 0 4px 4px;
}

:deep(.ol-attribution) {
    right: 10px;
    bottom: 10px;
    left: auto;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 10px;
    max-width: calc(100% - 180px);
}

:deep(.ol-attribution ul) {
    margin: 0;
    padding: 0;
    color: #666;
}

:deep(.ol-attribution li) {
    display: inline;
    margin: 0 3px;
}

:deep(.ol-full-screen) {
    top: 10px;
    right: 10px;
    left: auto;
}

:deep(.ol-control button) {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
}

:deep(.ol-control button:hover) {
    background: rgba(255, 255, 255, 1);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .custom-controls {
        top: 60px;
        right: 5px;
        padding: 8px;
        min-width: 130px;
    }

    .control-group h4 {
        font-size: 11px;
    }

    .control-btn {
        font-size: 10px;
        padding: 4px 6px;
    }

    #mouse-position {
        min-width: 140px;
        font-size: 10px;
    }

    #scale-line {
        font-size: 10px;
    }
}

/* 全屏模式下的样式调整 */
:fullscreen .custom-controls {
    top: 20px;
    right: 20px;
    padding: 15px;
}

:fullscreen .control-group h4 {
    font-size: 13px;
}

:fullscreen .control-btn {
    font-size: 12px;
    padding: 8px 12px;
}
</style>